---
import Config from '@/config.js'
import { useTranslations } from '@/i18n/utils'

const locale = Astro.currentLocale
const t = useTranslations(Astro.currentLocale)
const { frontmatter } = Astro.props
const title = frontmatter?.title ?
  `${frontmatter.title} · ${Config.title}` :
  `${Config.title} · ${t('site.description')}`
const description = frontmatter?.description || t('site.description')
const url = new URL(Astro.url.pathname, Astro.site || 'https://bootstrap-table.com')
---

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content={description}>
  <meta name="author" content={Config.author}>
  <meta name="keywords" content={Config.keywords}>
  <meta name="generator" content={Astro.generator} />
  <meta name="docsearch:language" content={locale}>

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content={url}>
  <meta property="og:title" content={title}>
  <meta property="og:description" content={description}>
  <meta property="og:image" content={`${Config.baseurl}/assets/images/bootstrap-table.jpg`}>
  <meta property="og:site_name" content={Config.title}>

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content={url}>
  <meta property="twitter:title" content={title}>
  <meta property="twitter:description" content={description}>
  <meta property="twitter:image" content={`${Config.baseurl}/assets/images/bootstrap-table.jpg`}>
  <meta property="twitter:creator" content={`@${Config.twitter}`}>

  <!-- Canonical URL -->
  <link rel="canonical" href={url}>
  <title>{title}</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@4" />
  <link rel="stylesheet" href={`${Config.baseurl}/assets/css/docs.min.css`}>
  <link rel="stylesheet" href={`${Config.baseurl}/assets/css/style.css?m=${Config.currentVersion}`}>

  <!-- Prism.js code highlighting styles -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.30.0/themes/prism.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.30.0/themes/prism-tomorrow.min.css">
  <link rel="icon" href={`${Config.baseurl}/favicon.png`}>

  <script>
    if (window !== top) { // 判断当前的 window 对象是否是 top 对象
      // @ts-ignore-next-line
      top.location.href = window.location.href // 如果不是，将 top 对象的网址自动导向被嵌入网页的网址
    }
  </script>
</head>
